{% extends "mobile/common/vacation_base.html" %}

{% block title %}{{ hotel.name_cn }}{% endblock %}
{% block css_ex %}
    <!-- build:css(.tmp) css/hotel/hotel_product_list_main.css -->
    <link rel="stylesheet" href="{{ STATIC_URL }}mobile/css/common/widget/swiper.css">
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}mobile/css/hotel/hotel_product_list.css">
    <!-- endbuild -->
{% endblock %}

{% block app_header %}
    <script>
        {% if not is_breadtrip %}
        // App 显示底部navigation bar
        var btShowBottomBar = 'YES';
        // System
        var breadtripBannerTitle = '{{ hotel.name_cn }}';
        var activityName = '{{ hotel.name_cn }}';
        // Display share button or not
        var shrFlag = 1;
        // Display back button or not 
        var goBackFlag = true;
        {% else %} 
        // App 显示底部navigation bar
        var bt_show_bottom_bar = 'YES';

        // System
        var breadtrip_banner_title = '{{ hotel.name_cn }}';
        var activity_name = '{{ hotel.name_cn }}';

        // Display share button or not
        var shr_flag = 1;
        var cnl_webview = 1;
        var disable_back = 1;
        {% endif %}   

        // WeChat start
        var shr_wechat_title_friend = '{{ hotel.name_cn }}';
        var shr_wechat_summary_friend = '我在面包自由行发现了一个很棒的酒店，快来看看吧!';
        var shr_wechat_image = '{{hotel.images[0]}}' || location.origin + '/static/img/mobile/hotel/share_default.jpg';
        var shr_wechat_title_circle = '面包自由行推荐酒店：{{ hotel.name_cn }}';
        var shr_wechat_summary_circle = '我在面包自由行发现了一个很棒的酒店，快来看看吧!';
    </script>
{% endblock %}

{% block content %}
<section ng-controller="hotelController" ng-cloak>
    <header>
        {% if hotel.images|length > 0 %}
        <div id="swiper-container" data-length="{{ hotel.images|length }}" class="swiper-container">
            <div class="swiper-wrapper">
                {% for img in hotel.images %}
                {% if loop.index < 6 %}
                <div class="swiper-slide" >
                    <p></p>
                    <div style="background-image: url({{img}})"></div>
                </div>
                {% endif %}
                {% endfor %}
            </div>
            <div class="swiper-pagination"></div>
        </div>
        {% endif %}
        <div class="hotel-profile">
            <div class="hotel-title">
                <h1 class="ellipsis">{{ hotel.name_en }}</h1>
                <h1 class="ellipsis">{{ hotel.name_cn }}</h1>
                <div class="stars-zone">
                <i class="icon-trophy"></i>
                <ul class="stars">
                {% for i in [1,2,3,4,5] %}
                    {% if i < (hotel.star | float) %}
                    <li class="icon-star"></li>
                    {% elif i == (hotel.star | float) %}
                        <li class="icon-star"></li>
                    {% elif i > (hotel.star | float) %}
                        {% if (i-0.5 )== (hotel.star | float) %}
                        <li class="icon-star-half"></li>
                        {% else %}
                        <!-- <li class="icon-star-grey"></li> -->
                        {% endif %}
                    {% endif %}
                {% endfor %}
                </ul>
                </div>
            </div>
            <span class="hotel-advantage"><i class="former"></i>{{ hotel.location }}<i class="latter"></i></span>
            <p class="hotel-map" ng-click="goMap('{{hotel.longitude}}', '{{hotel.latitude}}', '{{ hotel.name_cn }}', '{{ hotel.address_cn }}')"><span class="ellipsis">地址：{{ hotel.address_cn }}</span><i class="icon-arrow"></i></p>
        </div>
    </header>
    <ul class="date-zone">
        <li>
            <p>入住<br>
                <input id="checkinDate" name="checkin_date"type='date' value="{[data.checkin_date]}" min="{[data.today]}" ng-model="data.checkin_date" ng-change="changeIndate()" ng-blur="blur($event)" autocomplete format-date/>
            </p>
            
        </li>
        <li>
            <p>退房<br>
                <input id="checkoutDate" name='checkout_date' type='date'  value="{[data.checkout_date]}" min="{[data.checkin_date]}" ng-model="data.checkout_date" ng-change="changeOutdate()" ng-enter="" ng-blur="blur($event)" autocomplete format-date/>
            </p>
        </li>
        <li>
            <p>房间数量<br>
                <select ng-init="rooms_count = ([1,2,3,4,5,6,7,8] | filter:data.rooms_count:strict)[0]" ng-model="rooms_count" ng-options="o for o in [1,2,3,4,5,6,7,8]" ng-change="selectRoom(rooms_count)" autocomplete></select>
            </p> 
        </li>
    </ul>
    <section class="room-zone">
        <h4 ng-if=" data.products.length > 0 ">房型描述</h4>
        <ul ng-if=" data.products.length > 0 ">
            <li ng-repeat=" p in data.products track by $index" ng-click="goRoom(p.id)">
                <div class="room-img {[ p.images[0] ? '' : 'no-img' ]}" style="background-image: url({[p.images[0]]});"></div>
                <div class="room-info">
                    <h2 class="ellipsis">{[p.room_name]}</h2>
                    <p class="ellipsis">{[ objTostring(p.bed_types) ]}
                       
                    </p>
                    <p class="ellipsis">{[p.breakfast]} {[p.internet]}</p>
                    <p class="ellipsis">{[p.smoking_preference]}</p>

                    <p class="room-stock ellipsis" ng-if="p.current_allotment < 4 ">仅剩{[ p.current_allotment ]}间</p>
                </div>
                <div class="room-price"><span>¥</span>{[round(p.average_price)]}<i class="icon-arrow"></i></div>
            </li>
        </ul>
        <div class="icon-empty" ng-if=" data.products.length < 1 "><p>暂无合适的房型</p></div>
    </section>
    <section class="hotel-about">
        {% if hotel.description_cn %}
        <div  ng-click="goHref('{{ info_url }}')">酒店详情<i class="icon-arrow"></i></div>
        {% endif %}
        {% if hotel.facilities %}
        <div ng-click="goHref('{{ facility_url }}')">酒店设施<i class="icon-arrow"></i></div>
        {% endif %}
        {% if hotel.policy %}
        <div ng-click="goHref('{{ policy_url }}')">酒店声明<i class="icon-arrow"></i></div>
        {% endif %}
    </section>
    <ul class="hotel-bottom">
        <li><a ng-href="tel:400-625-1066">电话咨询</a></li>
        <li id="book-btn" class="{[ data.products.length > 0 ? '' : 'disabled']}"><a ng-click='goBook("{{direct_book_url}}")'>立即预订</a></li>
    </ul>
</section>
{% endblock %}

{# 不加载swipe组件 #}
{% block js_swipe %}{% endblock %}

{# 不加载zepto touch组件 #}
{% block js_touch %}{% endblock %}

{% block js_ex %}
{%include "mobile/common/widget/wechatjssdk.html" %}
<script type="text/javascript">
    BT.context('checkin_date', '{{checkin_date}}')
    BT.context('checkout_date', '{{checkout_date}}')
    BT.context('rooms_count', '{{rooms_count}}')
    BT.context('hotel_id', '{{hotel_id}}')
    var obj = {{ products|safe }};
</script>
<!-- build:js js/hotel/hotel_product_list_main.js -->
<script src="{{ STATIC_URL }}mobile/js/common/lib/angular.min.js"></script>
<script src="{{ STATIC_URL }}mobile/js/common/lib/idangerous.swiper.js"></script>
<script src="{{ STATIC_URL }}mobile/js/common/lib/moment.js"></script>
<script src="{{ STATIC_URL }}mobile/js/hotel/hotel_product_list.js"></script>
<!-- endbuild -->
{% endblock %} 
    
